function StatisticsBox(canvas, x, y, width, height, statistics) {
  this.canvas;
  this.context;
  this.x = x;
  this.y = y;
  this.width;
  this.height;
  this.statistics = statistics;

  this.init = function(canvas, x, y, width, height) {
    this.canvas = canvas;
    this.context = canvas.getContext('2d');
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
  };

  this.draw = function() {
    this.context.strokeStyle = "#bbb";
    this.context.fillStyle = "rgba(0,0,0,0.8)";
    this.context.lineWidth = 2;
    this.context.fillRect(this.x + 1, this.y + 1, this.width - 2, this.height - 2);
    this.context.strokeRect(this.x + 1, this.y + 1, this.width - 2, this.height - 2);
    this.context.fillStyle = '#bbb';
    this.context.font = 'bold 16px monospace';
    this.context.textBaseline = 'middle';
    this.context.textAlign = "center";
    this.context.fillText("RELEASED " + this.statistics.released, this.x + (this.width / 2), this.y + (this.height / 4));
    this.context.fillText("SAVED    " + this.statistics.saved, this.x + (this.width / 2), this.y + (2 * this.height / 4));
    this.context.fillText("REQUIRED " + this.statistics.required, this.x + (this.width / 2), this.y + (3 * this.height / 4));
  };

  this.init(canvas, x, y, width, height);
}

function ActionBar(world) {
  this.canvas;
  this.context;
  this.width;
  this.height;
  this.buttons;
  this.callback;
  this.statistics = world.statistics;
  this.world = world;

  this.isSelected = function(button, x, y) {
    var offset = $(this.canvas).offset();
    var uiLeft = offset.left;
    var uiTop = offset.top;
    selectorLeft = button.x + uiLeft;
    selectorRight = selectorLeft + button.width;
    selectorTop = button.y + uiTop;
    selectorBottom = selectorTop + button.height;

    if (x > selectorLeft && x < selectorRight && y > selectorTop && y < selectorBottom) {
      return true;
    }
    return false;
  };

  this.mouseMove = function(x, y) {
    this.world.setSelected(x, y);
    for ( var i = 0; i < this.buttons.length; i++) {
      var button = this.buttons[i];
      if (this.isSelected(button, x, y)) {
        button.hover = true;
      } else {
        button.hover = false;
      }
    }
  };

  this.mouseUp = function(x, y) {
    var selection = null;
    for ( var i = 0; i < this.buttons.length; i++) {
      var button = this.buttons[i];
      if (this.isSelected(button, x, y)) {
        selection = button;
        break;
      }
    }
    if (selection != null) {
      for ( var i = 0; i < this.buttons.length; i++) {
        var button = this.buttons[i];
        button.selected = false;
      }
      selection.selected = true;
    }
  };

  this.mouseDown = function(x, y) {
     for ( var i = 0; i < this.buttons.length; i++) {
      var button = this.buttons[i];
      if (button.selected) {
        button.action.apply(this.world);
      }
    }
  };

  this.init = function() {
    this.canvas = createAnchoredCanvasOverlay("200", 500, 60, 10);
    this.messageCanvas = createCanvasOverlay("250");
    this.context = this.canvas.getContext('2d');
    this.width = this.canvas.width;
    this.height = this.canvas.height;
    
    this.buttons = [];
    var height = this.height;
    var width = 50;
    
    var sprite = new Sprite();
    sprite.drill();
    this.buttons.push(new ActionButton(sprite, width, height, new ChangeDroidTypeAction(15, Digger)));
    sprite = new Sprite();
    this.buttons.push(new ActionButton(sprite, width, height, new ChangeDroidTypeAction(15, Basher)));
    sprite = new Sprite();
    sprite.explode();
    this.buttons.push(new ActionButton(sprite, width, height, new DroidBuffAction(15, DroidBuff.EXPLODER, 100)));
    sprite = new Sprite();
    this.buttons.push(new ActionButton(sprite, width, height, new ChangeDroidTypeAction(15, Stopper)));
    sprite = new Sprite();
    this.buttons.push(new ActionButton(sprite, width, height, new DroidBuffAction(15, DroidBuff.FLOATER)));
    sprite = new Sprite();
    this.buttons.push(new ActionButton(sprite, width, height, new DroidBuffAction(15, DroidBuff.CLIMBER)));
    sprite = new Sprite();
    this.buttons.push(new ActionButton(sprite, width, height, new ChangeDroidTypeAction(15, Builder)));
    
    this.buttons.push(new StatisticsBox(this.canvas, spacing * 2, 0, 140, this.height, this.world.statistics));

    var spacing = 4;
    var currentX = 0;
    for ( var i = 0; i < this.buttons.length; i++) {
      this.buttons[i].x = currentX;
      currentX += this.buttons[i].width + spacing;
      this.buttons[i].y = 0;
    }
    // this.buttons.push();
    // this.buttons.push(new Button(this.canvas, spacing, 0, 50, this.height,
    // new DroidAction(Basher, 20)));

    this.buttons[0].selected = true;
  };

  this.draw = function() {
    this.context.clearRect(0, 0, this.width, this.height);
    for ( var i = 0; i < this.buttons.length; i++) {
      var button = this.buttons[i];
      
      button.draw(this.canvas);
    }
  };

  this.init();
}

function MessageBox(world) {
  this.statistics = world.statistics;
  this.canvas = createAnchoredCanvasOverlay("200", $(window).width(), $(window).height(), 0);
  this.context = this.canvas.getContext('2d');
  this.width = 500;
  this.height = 300;
  this.x = (this.canvas.width / 2) - (this.width / 2);
  this.y = (this.canvas.height / 2) - (this.height / 2);

  this.draw = function() {
    if (this.statistics.hasFinished()) {
      this.context.strokeStyle = "#bbb";
      this.context.fillStyle = "rgba(0,0,0,0.8)";
      this.context.lineWidth = 2;
      this.context.fillRect(this.x + 1, this.y + 1, this.width - 2, this.height - 2);
      this.context.strokeRect(this.x + 1, this.y + 1, this.width - 2, this.height - 2);

      this.context.fillStyle = '#a4ca39';
      this.context.textBaseline = 'top';
      this.context.textAlign = "center";

      this.context.font = 'bold 90px monospace';
      var text;
      if (this.statistics.hasWon()) {
        text = "You Win!";
      } else {
        text = "You Lose!";
      }
      this.context.fillText(text, this.x + (this.width / 2), this.y + 70);

      this.context.fillStyle = '#bbb';
      this.context.font = 'bold 25px monospace';
      this.context.fillText(this.statistics.percentSaved() + "% Androids saved.", this.x + (this.width / 2), this.y + 190);
    }
  };
}

function UI(world) {
  this.messageBox = new MessageBox(world);
  this.actionBar = new ActionBar(world);

  this.draw = function() {
    this.actionBar.draw();
    this.messageBox.draw();
  };

  this.mouseMove = function(x, y) {
    this.actionBar.mouseMove(x, y);
  };

  this.mouseUp = function(x, y) {
    this.actionBar.mouseUp(x, y);
  };

  this.mouseDown = function(x, y) {
    this.actionBar.mouseDown(x, y);
  };
}